<script>
export default {
  name: 'Scrollbar',
  data() {
    return {
      table: null,
      scrollbarStyle: { width: 0, height: '20px ', left: 0, bottom: 0, display: 'none' },
      barStyle: { width: 0, height: '20px ' }
    }
  },
  mounted() {
    setTimeout(() => {
      this.scrollbarInit()
    }, 20)
  },
  methods: {
    // 初始化滚动条
    scrollbarInit() {
      const children = this.$parent.$children
      const table = children.find(e => e.$vnode.componentOptions.Ctor.options.name === 'ElTable')?.$el
      if (!table) {
        console.error('找不到同级的el-table')
        return
      }
      this.table = table.querySelector('.el-table__body-wrapper')
      const tableClientRect = table.getBoundingClientRect()
      this.scrollbarStyle.width = tableClientRect.width + 'px'
      this.scrollbarStyle.left = tableClientRect.left + 'px'
      this.barStyle.width = table.querySelector('.el-table__body').clientWidth + 'px'
      this.windowScroll()
      window.addEventListener('resize', this.scrollbarInit)
      window.addEventListener('scroll', this.windowScroll)
      if (this.$refs.scrollbar) this.$refs.scrollbar.addEventListener('scroll', this.scrollbarScroll)
    },
    // 浏览器滚动
    windowScroll() {
      const children = this.$parent.$children
      const table = children.find(e => e.$vnode.componentOptions.Ctor.options.name === 'ElTable')?.$el
      if (!table) return
      if (this.hasScrollbar()) this.scrollbarStyle.width = table.clientWidth + 'px'
      const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
      const clientWidth = table.querySelector('.el-table__body-wrapper').clientWidth
      const tableClientRect = table.getBoundingClientRect()
      const tableTop = tableClientRect.top
      const tableHeight = tableClientRect.height
      const tableWidth = table.querySelector('.el-table__body').getBoundingClientRect().width
      if (tableTop + 40 < clientHeight && tableTop + tableHeight > clientHeight && clientWidth < tableWidth) {
        this.scrollbarStyle.display = 'block'
        if (this.$refs.scrollbar) this.$refs.scrollbar.scrollLeft = this.table?.scrollLeft || 0
      } else {
        this.scrollbarStyle.display = 'none'
      }
    },
    // 虚拟滚动条滚动
    scrollbarScroll(e) {
      this.table.scrollLeft = e.target.scrollLeft
    },
    // 是否存在滚动条
    hasScrollbar() {
      return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)
    },
    // 销毁滚动事件
    beforeDestroy() {
      window.removeEventListener('resize', this.scrollbarInit)
      window.removeEventListener('scroll', this.windowScroll)
      this.$refs.scrollbar.removeEventListener('scroll', this.scrollbarScroll)
    }
  },
  render(h) {
    return (
      <div ref='scrollbar' class='scrollbar' style={this.scrollbarStyle}>
        <div class='bar' style={this.barStyle}></div>
      </div>
    )
  }
}
</script>
<style scoped>
 .scrollbar{
   overflow-x: auto;
   overflow-y: hidden;
   position: fixed;
   z-index: 9;
 }
</style>
